<template>
	<div class="b-content">
		<div class="icon-view" v-for="(i, index) in iconfont_list" :key="i.icon">
			<el-button :disabled="index != 2 && index != 3 && !isMarkupEnable" class="font-btn"
				@click="iconClick(i.type)"
				v-if="i.icon != '\ue6a9' && i.icon != '\ue7d5' && i.icon != '\ue7d6' && i.icon != '\ue6ab' && i.optType.indexOf(optType) != -1">
				<el-tooltip :content="i.tip" placement="top" effect="dark">
					<i class="iconfont">{{ i.icon }}</i>
				</el-tooltip>
			</el-button>
		</div>
		<div class="solid-view">
			<span class="solid"></span>
			<el-tooltip :content="$t('message.cadViewer.paramSelect.barNames.fit')" placement="top" effect="dark">
				<i class="iconfont" style="color: rgba(0, 0, 0)" @click="onResetViewClick">&#xe6b4;</i>
			</el-tooltip>
			<span class="solid"></span>
		</div>
		<!-- 下载 -->
		<!-- <i class="iconfont down" @click="onDownLoadClick">&#xe6c2;</i> -->
	</div>
</template>

<script>
import { getLocalStorage } from "../../utils/storage";

export default {
	data: function () {
		return {
			iconfont_list: [
				{
					icon: "\ue6ab",
					type: "save",
					tip: this.$t("message.cadViewer.paramSelect.barNames.save"),
					optType: "0",
				},
				{
					icon: "\ue7d5",
					type: "print_set",
					tip: this.$t(
						"message.cadViewer.paramSelect.barNames.print"
					),
					optType: "0",
				},
				{
					icon: "\ue6af",
					type: this.isMarkupEnable
						? "over_tag_mode"
						: "enter_tag_mode",
					tip: this.isMarkupEnable
						? this.$t(
							"message.cadViewer.paramSelect.barNames.over_tag_mode"
						)
						: this.$t(
							"message.cadViewer.paramSelect.barNames.enter_tag_mode"
						),
					optType: "0,1,2",
				},
				{
					icon: "\ue7d6",
					type: "sign_file",
					tip: this.$t(
						"message.cadViewer.paramSelect.barNames.sign_file"
					),
					optType: "0",
				},
			],

			font: [
				{
					value: "Meiryo",
					label: this.$t(
						"message.cadViewer.paramSelect.fontNames[0]"
					),
				},
				{
					value: "Meiryo UI",
					label: this.$t(
						"message.cadViewer.paramSelect.fontNames[1]"
					),
				},
			],
		};
	},

	props: {
		selectedShapeParam: {},
		isAble: Boolean,
		isMarkupEnable: Boolean,

		optType: {
			type: Number,
			default: 0,
		},
	},
	watch: {
		isMarkupEnable(newName, oldName) {
			console.log(newName, "new")
			this.iconfont_list[2].type = this.isMarkupEnable
				? "over_tag_mode"
				: "enter_tag_mode";

			if (newName) this.iconClick("show_markups");
		},
	},
	methods: {
		iconClick(e) {
			if (e == "show_markups") this.showMarkups = true;
			else if (e == "hide_markups") this.showMarkups = false;
			this.$emit("onMenuClick", e);
		},

		/**
		 * 重置视图
		 */
		onResetViewClick() {
			this.$emit("handleResetViewClick", {});
		},

		/**
		 * 下载
		 */
		onDownLoadClick() {
			this.$emit("handleDownLoadClick", {});
		},

		getParamsSelect() {
			let lang = getLocalStorage("lang");
			let defaultFont =
				lang == "1" ? this.font[1].value : this.font[0].value;
			return {
				selectedFont: defaultFont,
				selectedFontSize: "10",
				fontWidth: "10",

				selectedBold: false,
				selectedItalics: false,
				selectedUnderline: false,
				selectedLineType: 0,
				selectedLineWidth: 4,
				selectedLineColor: "#ff0000",
				selectedFillColor: "#ff0000",
				selectedFillType: 0,
			};
		},
	},
	mounted() { },
};
</script>
<style lang="scss" scoped>
.b-content {
	position: relative;
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: rgba(245, 245, 245, 1);
	border: 1px solid rgba(226, 226, 226, 1);
	border-bottom: 1px solid #b4b4b4;

	.unable-style {
		position: absolute;
		width: 100%;
		height: 48px;
		background: rgba(255, 255, 255, 0.5);
		z-index: 5;
	}

	.icon-view {
		margin-left: 3px;
	}

	.solid-view {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.solid {
			width: 1px;
			height: 28px;
			margin: 0 8px;
			background: rgba(217, 217, 217, 1);
		}

		.iconfont {
			font-size: 24px;
			cursor: pointer;
			// color: rgba(149, 149, 149);
			margin: 0 8px;
		}

		::v-deep .el-button+.el-button {
			margin-left: 2px;
		}

		.layer-select {
			::v-deep .el-input__inner {
				height: 24px;
				background: rgba(252, 252, 252, 1);
				border-radius: 2px;
				border: 1px solid rgba(204, 204, 204, 1);
			}

			::v-deep .el-input__icon {
				line-height: 24px;
			}
		}
	}

	.input-view {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 0 8px;

		.l-ipt {
			margin-right: 16px;

			::v-deep .el-input__inner {
				width: 124px;
				height: 24px;
				background: rgba(252, 252, 252, 1);
				border-radius: 2px;
				border: 1px solid rgba(204, 204, 204, 1);
			}

			::v-deep .el-input__icon {
				line-height: 24px;
			}
		}

		.s-ipt {
			::v-deep .el-input__inner {
				width: 47px;
				height: 24px;
				background: rgba(252, 252, 252, 1);
				border-radius: 2px;
				border: 1px solid rgba(204, 204, 204, 1);
			}

			::v-deep .el-input__icon {
				line-height: 24px;
			}
		}

		.m-ipt {
			::v-deep .el-input__inner {
				width: 65px;
				height: 24px;
				background: rgba(252, 252, 252, 1);
				border-radius: 2px;
				border: 1px solid rgba(204, 204, 204, 1);
			}

			::v-deep .el-input__icon {
				line-height: 24px;
			}
		}
	}

	.color-view {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.solid {
			width: 1px;
			height: 28px;
			margin: 0 8px;
			background: rgba(217, 217, 217, 1);
		}

		.l-ipt {
			margin-right: 16px;

			::v-deep .el-input__inner {
				width: 110px;
				height: 24px;
				background: rgba(252, 252, 252, 1);
				border-radius: 2px;
				border: 1px solid rgba(204, 204, 204, 1);
			}

			::v-deep .el-input__icon {
				line-height: 24px;
			}
		}

		.fill {
			width: 24px;
			height: 24px;
			margin: 0 8px;

			::v-deep .el-color-picker__trigger {
				width: 24px;
				height: 24px;
			}
		}

		.iconfont {
			font-size: 24px;
		}
	}

	.down {
		position: absolute;
		right: 24px;
		font-size: 24px;
		cursor: pointer;
		color: rgba(0, 0, 0, 1);
	}
}

.font-btn {
	width: 24px !important;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: whitesmoke;
	border: 0 none;
	color: rgb(89, 89, 89);

	.iconfont {
		font-size: 24px;
		// cursor: pointer;
	}
}

.font-btn-active {
	background: rgba(220, 220, 220, 1);
	border-radius: 4px;
	border: 1px solid rgba(189, 189, 189, 1);
	width: 24px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0 none;
	color: rgb(89, 89, 89);

	.iconfont {
		font-size: 24px;
		// cursor: pointer;
	}
}

::v-deep .el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
	background-color: transparent;
	border: 0 none;
	color: #c0c4cc;
}

::v-deep .el-color-picker__mask {
	background-color: transparent;
}

::v-deep .m-colorPicker .box {
	width: 212px;
	z-index: 666;
}

::v-deep .m-colorPicker {
	margin: 0 8px;
}

::v-deep .el-color-picker__icon {
	display: none;
}

::v-deep .el-color-picker--mini .el-color-picker__trigger {
	padding: 0;
}
</style>
